<template>
  <div class="statistics-third">
    <!--<gl-breadcrumb text="" class="mb20"></gl-breadcrumb>-->
    <df-search-title title="使用概况"></df-search-title>
    <div class="table bg p20">
      <gl-table :data="data" :columns="columns">
        <div class="customer csp" style="color: #19aae3"
             @click="toDetail(row)"
             slot="product_num" slot-scope="{row}">{{row.product_num}}
        </div>
      </gl-table>
      <gl-pagination :total="total" :curr="curr" :size="limits" @callback="paginationChange"></gl-pagination>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    name: "StatisticsThird",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        data: [],

        columns: [
          {label: 'ID', prop: 'tpa_id'},
          {label: '第三方名称', prop: 'tpa_name'},
          {label: '接入产品数', prop: 'product_num', slot: 'product_num', format: val => this.tools.moneyNumber(val)},
          {label: '接入设备总数', prop: 'rn_num', format: val => this.tools.moneyNumber(val)},
          {label: '已激活设备数', prop: 'ao_num', format: val => this.tools.moneyNumber(val)},
        ],
        total: 0,
        curr: 1,
        limits: 10,
      }
    },
    watch: {},
    created() {
      this.getList(1);
    },
    mounted() {
    },
    methods: {
      getList(init) {
        if (init) {
          if (init.curr) {
            this.curr = init.curr;
            this.limits = init.size;
          } else {
            this.curr = 1;
          }
        }
        this.http.$post('admin/thirdpa.api/lists', {
          company_id: this.userInfo.company_id,
          curr: this.curr,
          limits: this.limits,
        },{loading:true}).then(res => {
          this.data = res.list;
          this.total = res.total;
        }).catch(this.$err);
      },
      paginationChange({curr, size}) {
        this.curr = curr;
        this.limits = size;
        this.getList();
      },
      toDetail(row) {
        this.$router.push({
          name: 'StatisticsThirdDetail',
          params: {
            id: row.tpa_id
          }
        });
      },

    },
  }
</script>

<style scoped lang="less">
  .bg {
    background-color: #fff;
    border-radius: 5px;
  }

</style>